<template>
  <div>
    <h1>当前求和为:{{ sum }}</h1>
    <h1>当前求和放大10倍后为:{{bigSum}}</h1>
    <h3>我在{{ school }}学习{{ subject }}</h3>
    <h3 style="color:red">下方总人数:{{personList.length}}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>


  </div>

</template>
<script>
import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'

export default {
  name: 'Count',
  data: function () {
    return {
      n: 1
    }
  },
  methods: {
    // increment: function () {
    //   // 可以直接绕过actions commit后到mutations
    //   this.$store.commit('JIA', this.n)
    //
    // },
    // decrement: function () {
    //   this.$store.commit('JIAN', this.n)
    // },
    //借助mapMutations 生成对应的方法 方法中会调用commit 联系Mutations
    ...mapMutations('countAbout',{'increment': 'JIA', 'decrement': 'JIAN'}),

    // ...mapMutations(['JIA','JIAN']),

    // incrementOdd: function () {
    //   this.$store.dispatch('jiaOdd', this.n)
    //
    // },
    // incrementWait: function () {
    //   this.$store.dispatch('jiaWait', this.n)
    // },
    //借助 mapActions 生成对应的方法 方法中会调用 dispatch 联系 Actions(对象写法)
    ...mapActions('countAbout',{incrementOdd: 'jiaOdd', incrementWait: 'jiaWait'})
    //借助 mapActions 生成对应的方法 方法中会调用 dispatch 联系 Actions(数组写法)
    // ...mapActions(['jiaOdd','jiaWait'])


  },
  computed: {

    //借助mapState生成计算属性，从state中读取数据(对象写法)
    // ...mapState({
    //   he:'sum',
    //   xueXiao:'school',
    //   xueKe:'subject'
    // })
    //借助mapState生成计算属性，从state中读取数据(数组写法)
    ...mapState('countAbout', ['sum', 'school', 'subject']),
    ...mapState('personAbout', ['personList']),
    ...mapGetters('countAbout',['bigSum']),

  },
  mounted() {
    console.log(this.$store)
  }


}

</script>
<style scoped>
button {
  margin-left: 5px;
}

</style>